<template>
    <div class="container">
        <!-- 面包屑导航栏 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
            <el-breadcrumb-item>驿站管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 模糊搜索框 -->
        <el-row style="margin-top: 10px;">
            <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
                <!-- 驿站名称框 -->
                <el-form-item label="驿站名称">
                    <el-input clearable @clear="querySearchCourierStationList" v-model="queryInfo.courierStationName"
                        placeholder="请输入驿站名称"></el-input>
                </el-form-item>
                <el-form-item label="小区名称">
                    <el-input clearable @clear="querySearchCourierStationList" v-model="queryInfo.communityName"
                        placeholder="请输入小区名称"></el-input>
                </el-form-item>
                <!-- 时间框 -->
                <el-form-item label="添加时间">
                    <el-date-picker value-format="yyyy-MM-dd hh:mm:ss" v-model="date" type="daterange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!-- 搜索框 -->
                <el-form-item>
                    <el-button @click="querySearchCourierStationList" type="primary">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <!-- 添加按钮 -->
        <el-row style="margin-bottom: 10px;">
            <el-button @click="addcourierStation" type="primary">添加驿站</el-button>
        </el-row>

        <!-- 表格展示驿站信息 -->
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: '#1890ff', color: '#fff' }"
            style="width: 100%">
            <el-table-column align="center" prop="courierStationId" label="ID">
            </el-table-column>
            <el-table-column align="center" prop="courierStationName" label="驿站名字">
            </el-table-column>
            <el-table-column align="center" prop="courierStationImage" label="驿站照片">
            </el-table-column>
            <el-table-column align="center" label="驿站地址">
                <!-- 使用作用域插槽 -->
                <template slot-scope="scope">
                    {{ scope.row.courierStationProvince }}
                    {{ scope.row.courierStationCity }}
                    {{ scope.row.courierStationDistrict }}
                    {{ scope.row.courierStationAddress }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="courierStationCommunityName" label="所在小区">
            </el-table-column>
            <el-table-column align="center" prop="courierStationOrderCount" label="订单总数">
            </el-table-column>
            <el-table-column align="center" prop="addTime" label="添加时间">
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope="scope">
                    <el-tooltip content="看什么？没见过文字提示框？" placement="top">
                        <el-button v-if="scope.row.courierStationStatus == 1" type="success" size="mini">上架中</el-button>
                        <el-button v-if="scope.row.courierStationStatus == 0" type="danger" plain
                            size="mini">已下架</el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-link @click="sxj(scope.row)" v-if="scope.row.courierStationStatus == 0" type="primary"
                        :underline="false">立即上架</el-link>
                    <el-link @click="sxj(scope.row)" v-if="scope.row.courierStationStatus == 1" type="primary"
                        :underline="false">立即下架</el-link>&nbsp;&nbsp;
                    <el-link @click="editcourierStation(scope.row)" type="primary" :underline="false">编辑</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮-->
        <el-row style="margin-top: 10px;">
            <!-- current-page:要访问的页码 -->
            <!-- page-size：每页展示的条数 -->
            <!-- page-sizes：可选择的每页展示的条数 -->
            <!-- total：数据总条数 -->
            <!-- current-change: 当选择页码时触发的函数 -->
            <!-- size-change： -->
            <el-pagination :current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]"
                :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </el-row>

        <!-- 添加或修改门店的对话框 -->
        <!-- title:对话框名称 -->
        <!-- visible.sync： true对话框显示，false对话框隐藏-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
            <el-form :model="courierStation" :rules="rules" ref="courierStation" hide-required-asterisk>
                <el-form-item label="驿站名称" prop="courierStationName" label-width="100px">
                    <el-input placeholder="请输入驿站名称" v-model="courierStation.courierStationName"></el-input>
                </el-form-item>
                <el-form-item prop="courierStationProvince" label="所属地区" label-width="100px">
                    <el-cascader v-model="address" :options="citys"></el-cascader>
                </el-form-item>
                <el-form-item label="" prop="courierStationAddress" label-width="100px">
                    <el-input placeholder="请填写详细地址" v-model="courierStation.courierStationAddress"></el-input>
                </el-form-item>
                <el-form-item label="所属小区" prop="courierStationCommunityId" label-width="100px">
                    <template>
                        <el-select v-model="courierStation.courierStationCommunityId
                            " filterable placeholder="请选择">
                            <el-option v-for="item in communityList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="updatecourierStation" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入省市区数据
import citys from "../assets/citydata";
export default {
    data() {
        return {
            queryInfo: {
                pageSize: 10,
                pageNum: 1,

            },
            date: null,
            tableData: [],
            communityList: [],  // 所有小区
            total: null,
            title: '',
            dialogFormVisible: false,
            // 驿站对象
            courierStation: {
                courierStationName: "",
                courierStationImage: "",
                courierStationProvince: "",
                courierStationCity: "",
                courierStationDistrict: "",
                courierStationAddress: "",
                courierStationCommunityId: ''
            },
            citys: citys,       // 所有的省市区对象
            address: [],        // 省市区三个数据的数组

            courierStation2: {
                courierStationId: "",
                courierStationStatus: "",
            },

            // form表单验证规则
            rules: {
                courierStationName: [
                    { required: true, message: '请输入驿站名称', trigger: 'blur' },
                ],
                courierStationAddress: [
                    { required: true, message: '请输详细地址', trigger: 'blur' },
                ],
                courierStationProvince: [
                    { required: true, message: '请选择所属地区', trigger: 'blur' },
                ],
            }
        }
    },
    methods: {
        // 展示添加驿站对话框
        addcourierStation() {
            this.dialogFormVisible = true
            this.title = "添加驿站";
        },
        // 展示修改的对话框
        editcourierStation(row) {
            this.courierStation = row
            this.dialogFormVisible = true;
            this.title = '编辑驿站'
            this.address = [row.courierStationProvince, row.courierStationCity, row.courierStationDistrict]
        },
        // 添加或修改驿站
        updatecourierStation() {
            // 先做form表单验证，判断数据合法性
            this.$refs['courierStation'].validate((valid) => {
                if (valid) {
                    if (this.title === '添加驿站') {
                        // 添加驿站执行的post请求
                        this.$http.post('courierStation/addCourierStation', this.courierStation)
                            .then(res => {
                                // console.log(res.data);
                                if (res.data.status == 200) {
                                    this.$message.success('添加成功')
                                    this.dialogFormVisible = false
                                    this.querySearchCourierStationList()
                                    this.cancel()
                                } else {
                                    this.$message.error('操作失败')
                                }
                            })
                    } else if (this.title === '编辑驿站') {
                        // 修改门店执行的post请求
                        this.$http.post('courierStation/modifyCourierStation', this.courierStation)
                            .then(res => {
                                // console.log(res.data);
                                if (res.data.status == 200) {
                                    this.$message.success('修改成功')
                                    this.dialogFormVisible = false
                                    this.querySearchCourierStationList()
                                    this.cancel()
                                } else {
                                    this.$message.error('操作失败')
                                }
                            })
                    }

                } else {
                    this.$message.error('格式有误');
                    return false;
                }
            })
        },
        // 添加或修改的取消
        cancel() {
            this.dialogFormVisible = false
            this.courierStation = {
                courierStationName: "",
                courierStationImage: "",
                courierStationProvince: "",
                courierStationCity: "",
                courierStationDistrict: "",
                courierStationAddress: "",
                courierStationCommunityId: ''
            }
            this.address = []
        },
        // 上下架方法
        sxj(row) {
            if (row.courierStationStatus == 1) {
                this.$http.post('courierStation/modifyCourierStation', {
                    courierStationId: row.courierStationId,
                    courierStationStatus: 0
                })
                    .then(res => {
                        // console.log(res);
                        this.querySearchCourierStationList()
                    })
            } else if (row.courierStationStatus == 0) {
                this.$http.post('courierStation/modifyCourierStation', {
                    courierStationId: row.courierStationId,
                    courierStationStatus: 1
                })
                    .then(res => {
                        // console.log(res);
                        this.querySearchCourierStationList()
                    })
            }
        },
        // 获取所有驿站信息的函数
        querySearchCourierStationList() {
            this.$http.get('courierStation/querySearchCourierStationList', {
                params: this.queryInfo
            })
                .then(res => {
                    // console.log(res.data)
                    if (res.data.status == 200) {
                        // console.log(res.data.data.list)
                        this.tableData = res.data.data.list
                        // 动态赋予数据总条数
                        this.total = res.data.data.total
                    } else {
                        this.$message.error('服务器接口异常！')
                    }
                })
                .catch(error => {
                    this.$message.error('服务器接口异常！')
                })
        },
        // 获取所有小区信息的函数
        queryCommunityList() {
            this.$http.get('community/communityList?pageNum=1&pageSize=9999999')
                .then(res => {
                    // console.log(res.data)
                    if (res.data.status == 200) {
                        // console.log(res.data.data.list)
                        for (let i in res.data.data.list) {
                            if (res.data.data.list[i].communityName) {
                                this.communityList.push({
                                    value: res.data.data.list[i].communityId,
                                    label: res.data.data.list[i].communityName
                                })
                            }
                        }
                        // console.log(this.communityList);
                    } else {
                        this.$message.error('服务器接口异常！小区信息获取失败')
                    }
                })
                .catch(error => {
                    this.$message.error('服务器接口异常！小区信息获取失败')
                })
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryInfo.pageSize = val
            this.queryInfo.pageNum = 1
            this.querySearchCourierStationList()
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryInfo.pageNum = val
            this.querySearchCourierStationList()
        },

    },
    // 钩子函数，页面加载后直接执行的代码块
    mounted() {
        this.querySearchCourierStationList()
        this.queryCommunityList()
    },
    // 时间搜索侦听器
    watch: {
        // 要求名称必须和变量名保持一致
        date() {
            if (this.date) {
                this.queryInfo.startTime = this.date[0]
                this.queryInfo.endTime = this.date[1]
            } else {
                this.queryInfo.startTime = ''
                this.queryInfo.endTime = ''
            }
        },
        // 把动态获取的省市区加入到小区对象中
        address() {
            this.courierStation.courierStationProvince = this.address[0];
            this.courierStation.courierStationCity = this.address[1];
            this.courierStation.courierStationDistrict = this.address[2];
        }
    }
}
</script>